Skip to content

feat(new-ui): visual redesign — Mission Control theme#89

Open
tarasyarema wants to merge 2 commits intomainfrom
feat/new-ui-visual-redesign
Open

feat(new-ui): visual redesign — Mission Control theme#89
tarasyarema wants to merge 2 commits intomainfrom
feat/new-ui-visual-redesign

Conversation

@tarasyarema
Copy link
Contributor

@tarasyarema tarasyarema commented Feb 25, 2026

Summary

  • Replace beehive theme with clean "Mission Control" design built on shadcn/ui's native Zinc palette with amber as strategic accent
  • Rewrite core components: stats bar (hex → card grid), status badges (dot+text pattern), sidebar (semantic nav groups), AG Grid (neutral theme)
  • Systematic migration of all 13 pages — remove Graduate font, honeycomb patterns, glow effects, and 44+ hardcoded amber references

What changed

Color System (globals.css)

  • New oklch tokens: Zinc neutrals + amber --primary for both dark/light modes
  • Removed: beehive vars (--color-hive-*), terminal vars (--color-terminal-*), HSL sidebar overrides, @theme inline bridge
  • Removed: all dead CSS (honeycomb-bg, glow-*, hex-border, clip-hex, grain-overlay, breathe/heartbeat/pulse-amber animations)
  • Border radius aligned to shadcn/ui defaults

Components

  • Stats bar: Hexagonal clip-path layout → clean responsive card grid with semantic variants
  • Status badges: Simplified with dot indicator + text; satisfies for type safety
  • Sidebar: Grouped navigation (Core, Communication, Operations, System); native shadcn/ui active state
  • AG Grid: Themed via shadcn/ui CSS vars for automatic dark/light switching
  • Health indicator: Static colored dot, no heartbeat animation

Pages (all 13)

  • font-display text-2xl font-bold → text-xl font-semibold across all page headers
  • bg-amber-600 hover:bg-amber-700 → bg-primary hover:bg-primary/90 for action buttons
  • text-amber-400 → text-primary (links) or text-muted-foreground (decorative icons)
  • Recharts: colors from oklch tokens, tooltip styles matching theme

Typography

  • Removed Graduate font from Google Fonts link and all references
  • Space Grotesk for headings/body, Space Mono for data values

Test plan

  • pnpm build passes with 0 errors
  • npx tsc --noEmit passes with 0 TS errors
  • Dark mode: verify all pages render with Zinc neutral palette
  • Light mode: toggle and verify contrast/readability
  • Sidebar: verify grouped nav, active state highlight, collapse/expand
  • Dashboard: verify stats cards, activity feed, agent cards
  • All grid pages (agents, tasks, epics): verify AG Grid theming
  • Chat: verify channel sidebar, message bubbles, send button
  • Usage: verify charts with new color palette
  • Config: verify connect card styling, form buttons
  • Responsive: test at 320px, 768px, 1440px widths
  • grep -r "honeycomb\|glow-amber\|Graduate\|hex-border\|font-display\|hive-\|terminal-" new-ui/src/ returns 0 results

@tarasyarema
feat(new-ui): visual redesign — Mission Control theme
3c40ebb 
Replace the beehive/amber theme with a clean, professional "Mission Control"
design built on shadcn/ui's native Zinc palette with amber as strategic accent.

Key changes:
- New oklch color system (Zinc neutrals, amber primary) for both dark/light modes
- Remove Graduate font, honeycomb patterns, hex clip-paths, glow effects
- Rewrite stats bar from hexagonal layout to clean card grid
- Refine status badges with dot+text pattern and semantic colors
- Retheme AG Grid to use shadcn/ui CSS vars (automatic dark/light switching)
- Group sidebar navigation semantically (Core, Communication, Operations, System)
- Replace all hardcoded amber references with CSS var tokens across 13 pages
- Update Recharts colors and tooltip styles to match theme
- Simplify health indicator (static dot, no heartbeat animation)
@vercel
Copy link

vercel bot commented Feb 25, 2026 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
agent-swarm Ready Ready Preview, Comment Feb 25, 2026 9:50pm
agent-swarm-new Ready Ready Preview, Comment Feb 25, 2026 9:50pm

Request Review

@tarasyarema
fix(new-ui): use CSS vars instead of hardcoded oklch in charts
749ef6f 
Replace inline oklch values in Recharts components with CSS variable
references so charts adapt correctly to both dark and light modes.
Also fix duplicate import and no-op hover class from code review.
@tarasyarema
Copy link
Contributor Author

tarasyarema commented Feb 25, 2026

Visual Walkthrough — Mission Control Redesign

Automated browser walkthrough completed across all 12 pages in both dark and light modes. All acceptance criteria verified:

Dark Mode (Primary)

  • Dashboard — Stats cards render as clean card grid (no hexagonal clip-paths). Semantic color on stats (amber=running, green=done/health). Grouped sidebar navigation (Core, Communication, Operations, System). Active state uses bg-sidebar-accent.
  • Agents — AG Grid themed with neutral Zinc palette. Status badges use dot+text pattern (green dot for Idle).
  • Tasks — AG Grid clean, status badges render correctly (In Progress with amber pulse dot, Completed with green dot).
  • Epics — Grid renders with neutral theme.
  • Chat — Channel sidebar, message area, no amber dominance.
  • Services — Card grid with status dots, subtle hover effect.
  • Schedules — Grid renders correctly.
  • Usage — Charts use CSS variable colors (adapts to theme). Line chart, pie chart, bar chart all themed.
  • Config — Connection panel renders with amber primary button.
  • Repos — Grid renders correctly.

Light Mode

  • Dashboard, Tasks, Usage all verified — Zinc white/gray palette, amber-700 primary for contrast.
  • Borders subtle but visible, cards properly delineated.

Verified Clean

grep -r "honeycomb|glow-amber|Graduate|hex-border|font-display|hive-|terminal-" new-ui/src/ → 0 results
grep -rn "amber-[0-9]|#f5a623|#ffb84d" new-ui/src/pages/ → 0 results
pnpm build → ✓ built in 3.36s (0 errors)

📹 Local video walkthrough: /tmp/feature-video/mission-control-redesign.mp4 (372KB, 24s slideshow of all pages)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@tarasyarema